/*
 * @Author: your name
 * @Date: 2021-04-21 13:42:48
 * @LastEditTime: 2021-04-26 22:56:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \fantasticit\src\components\comment.tsx
 */
// 封装评论组件
import React from 'react';
import useStore from '@/context/useStore'
// 引入样式
import styles from './comment.less';
import {observer} from 'mobx-react-lite'

// 引入for-editor
import Editor from 'for-editor';
import { useState } from 'react';
import { message} from 'antd';
import { Button } from 'antd';
const Context = React.createContext({ name: 'Default' });
interface Iprops{
  comment:any
}
const Comment: React.FC<Iprops> = (props) => {
  const toolbar = {};
  let {msgcommentID,msgcommentlist} = useStore()
   // 评论
   const [messsageApi, contextHolder] = message.useMessage();
    // 输入框的值
  const [content, setContent] = useState('');
  function handleChange(value: string) {
    setContent(value);
  }
  // 姓名的值
  const [name, setName] = useState('');
  function nameChange(e: any) {
    setName(e.target.value);
  }
  // 邮箱的值
  const [email, setEmail] = useState('');
  function emailChange(e: any) {
    setEmail(e.target.value);
  }
  // 样式
  const style = {
    width: '730px',
    height: '140px',
    borderRadius: '2px',
    boxShadow: 'none',
    verticalAlign: 'bottom',
  };
  return (
    <>
      <div className={styles.text}>
        <Editor
          lineNum={false}
          toolbar={toolbar}
          placeholder="请输入评论内容（可输入 Markerdown 语法内容）"
          tab
          style={style} 
          onChange={(value) => handleChange(value)}
        ></Editor>
        <div className={styles.input}>
          <input type="text" placeholder="请输入您的称呼" className={styles.input_left}
          onChange={(e) => {
            nameChange(e);
          }} />
          <input
            type="text"
            placeholder="请输入您的邮箱（不会公开，您也可以选择不输入）" className={styles.input_right}
            onChange={(e) => {
              emailChange(e);
            }}
          />
        </div>
        <div className={styles.but}>
        <Button disabled={content&&name&&email?false:true}
            onClick={() => {
              props.comment(content,name,email);
            }}
          >
            评论
          </Button>
        </div>
        <Context.Provider value={{ name: 'Ant Design' }}>
          {contextHolder}
        </Context.Provider>
      </div>
    </>
  );
};
export default observer(Comment);
